<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.js"
    integrity="sha512-v5PfWsWi47/AZBVL7WMNqdbM1OMggp9Ce408yX/X9wg87Kjzb1xqpO2Ul0Oue8Vl9kKOcwPM2MWWkTbUjRxZOg=="
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://static.meteoblue.com/cdn/mapbox-gl-js/v1.11.1/mapbox-gl.css"
      integrity="sha512-xY1TAM00L9X8Su9zNuJ8nBZsGQ8IklX703iq4gWnsw6xCg+McrHXEwbBkNaWFHSqmf6e7BpxD6aJQLKAcsGSdA=="
      crossorigin="anonymous">

  <!-- Load the meteoblue Maps Plugin -->
  <script src="https://static.meteoblue.com/lib/maps-plugin/v0.x/maps-plugin.js"></script>

</head>
<body>
  <div id="app" style="height:100%;width:100%;">
    <div class="page-home-index">
      <div class="search-bar">
        <el-radio-group v-model="type" @change="changeType">
          <el-radio-button v-for="(item,index) in initData.types" :key="index" :label="item.id">{{item.name}}</el-radio-button>
        </el-radio-group>
    </div>
      <div class="map" id="coordinates" ref="basicMapbox" style="height:800px;width:100%"></div>
    </div>
  </div>
</body>
<script>
var vm = new Vue({
      el: '#app',
      data(){
        return {
          map: null,
          marker: null,
          mapboxToken: 'pk.eyJ1Ijoic25zcXNzIiwiYSI6ImNrZ2oxbWtqMTAzNnAyeXFwMDAzdmp2YTAifQ.AuaHmI9j-_VbOYxUSJACQw',
          meteoblueMaps: null,
          isLoad: false,
          list:[],
          type: 'Air',
          initData:{
            types:[
              {id: 'Air', name: '空气质量'},
              {id: 'Live', name: '实况气象'},
              {id: 'Poll', name: '污染排放'},
            ]
          },
          geoserver: 'https://miniapp.gdaes.com.cn:30080/geoserver'
        }
      },
      mounted() {
        this.createMap();
      },
      methods: {
    createMap() {
      const map = new mapboxgl.Map({
        container: 'coordinates',
        accessToken: this.mapboxToken,
        center:[116.708463, 23.37102],
        zoom: 8.5,
        hash: false,
        attributionControl: false,
        keyboard: false,   
      });
      const lang = 'zh';
      const apiKey = '1iw4Jq5NZK60Ig7O';
      const maps = 'windAnimation,wind,temperature,obsTemperature,humidity,pressure,totalClouds,highClouds,midClouds,lowClouds,precipitationDaily,obsPrecipitation,solarIradiation,sunshine,temperatureTendency,ozone,particulateMatter,no2,gph500,boundaryLayerHeight,aerosolOpticalDepth,uvIndex,windSpeedAnomaly,temperatureAnomaly,precipAnomaly,gph850temperature,temperatureAnomaly850';
      const overlay = 'windAnimationOverlay,domainBoundary,graticuleOverlay,pressure2mOverlay,temperatureObsOverlay';
      const temperatureUnit = 'C';
      const velocityUnit = 'm/s';
      const inventoryUrl = `https://maps-api.meteoblue.com/v1/map/inventory/filter?maps=${maps}&overlays=${overlay}&lang=${lang}&apikey=${apiKey}&temperatureUnit=${temperatureUnit}&velocityUnit=${velocityUnit}`;
      const meteoblueMaps = new meteoblueMapsPlugin({
        mapboxMap: map,
        inventory: inventoryUrl,
        apiKey: apiKey,
        showSidebar: true,
        timezoneOffsetInSeconds: 28800,
        timezoneAbbreviation: '北京时',
        canUseRestricted: true,
      });
      this.meteoblueMaps = meteoblueMaps;
      map.on('load', () => {
        this.map = map;
        // this.addBorderAir();        
      });
      map.on('resize', () => {
        console.log('resize')
      });
      map.on('idle', (evt) => {
        this.addBorder();     
        console.log(map.getStyle().layers);
      });
      this.meteoblueMaps.on('menuchange', (e) => {
        this.changeType();
        // if(e.map.id == 'windAnimation'){
        //   this.map.removeLayer('animationLayer')
        // }
      });
    },    
    addBorder() {
      if (!this.map) {
        return;
      }
      if (!this.map.getLayer('area-border')) {
        this.map.addLayer({
          id: 'area-border',
          type: 'line',
          'source': {
            'scheme':'tms',
            'type': 'vector',
            'tiles': [
                this.geoserver + '/gwc/service/tms/1.0.0/air:region@EPSG:900913@pbf/{z}/{x}/{y}.pbf'
            ]
          },
          'source-layer': 'region',
          filter: ['all', ['==', 'name', '汕头市'], ['==', 'level', 2]],
          minzoom: 1,
          maxzoom: 19,
          paint: {
            'line-color': '#ff9800',
            'line-width': 2
          }
        });
      }
    },
    changeType(val){      
      this.removeLayer();
      this['addBorder'+this.type]();
    },
    removeLayer(){
      let layers = ['air-border', 'live-border', 'poll-border'];
      layers.forEach(item => {
        if (this.map.getLayer(item)) this.map.removeLayer(item);
        if (this.map.getSource(item)) this.map.removeSource(item);  

      });      
    },
    addBorderAir(){
      if (!this.map) {
        return;
      }
      if (!this.map.getLayer('air-border')) {
        this.map.addLayer({
          id: 'air-border',
          type: 'line',
          'source': {
            'scheme':'tms',
            'type': 'vector',
            'tiles': [
                this.geoserver + '/gwc/service/tms/1.0.0/air:region@EPSG:900913@pbf/{z}/{x}/{y}.pbf'
            ]
          },
          'source-layer': 'region',
          filter: ['==', 'level', 1],
          minzoom: 1,
          maxzoom: 19,
          paint: {
            'line-color': '#2749B7',
            'line-width': 2
          }
        },this.map.getLayer('area-border')? 'area-border' : undefined);
        setTimeout(()=>{
          this.map.resize();
        },500)
      }
    },
    addBorderLive(){
      if (!this.map) {
        return;
      }
      if (!this.map.getLayer('live-border')) {
        this.map.addLayer({
          id: 'live-border',
          type: 'line',
          'source': {
            'scheme':'tms',
            'type': 'vector',
            'tiles': [
                this.geoserver + '/gwc/service/tms/1.0.0/air:region@EPSG:900913@pbf/{z}/{x}/{y}.pbf'
            ]
          },
          'source-layer': 'region',
          filter: ['==', 'level', 1],
          minzoom: 1,
          maxzoom: 19,
          paint: {
            'line-color': '#00ff00',
            'line-width': 2
          }
        },this.map.getLayer('area-border')? 'area-border' : undefined);
        setTimeout(()=>{
          this.map.resize();
        },500)
      }
    },
    addBorderPoll(){
      if (!this.map) {
        return;
      }
      if (!this.map.getLayer('poll-border')) {
        this.map.addLayer({
          id: 'poll-border',
          type: 'line',
          'source': {
            'scheme':'tms',
            'type': 'vector',
            'tiles': [
                this.geoserver + '/gwc/service/tms/1.0.0/air:region@EPSG:900913@pbf/{z}/{x}/{y}.pbf'
            ]
          },
          'source-layer': 'region',
          filter: ['==', 'level', 1],
          minzoom: 1,
          maxzoom: 19,
          paint: {
            'line-color': '#ff0000',
            'line-width': 2
          }
        },this.map.getLayer('area-border')? 'area-border' : undefined);
        setTimeout(()=>{
          this.map.resize();
        },500)
      }
    },
  }
});
</script>